<template>
  <div class="container">
    <el-container style="height: 100vh">
      <el-aside width="230px">
        <div class="img-container">
          <img style="width: 100px" src="../assets/logo.png" alt="" />
        </div>
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          :unique-opened="true"
        >
          <el-menu-item index="1" @click="gotoPage('/dash')">
            <svg
              style="width20px;height:20px;margin-right:10px;"
              viewBox="0 0 1024 1024"
              xmlns="http://www.w3.org/2000/svg"
              data-v-ba633cb8=""
            >
              <path
                fill="currentColor"
                d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z"
              ></path>
              <path
                fill="currentColor"
                d="M192 512a320 320 0 1 1 640 0 32 32 0 1 1-64 0 256 256 0 1 0-512 0 32 32 0 0 1-64 0z"
              ></path>
              <path
                fill="currentColor"
                d="M570.432 627.84A96 96 0 1 1 509.568 608l60.992-187.776A32 32 0 1 1 631.424 440l-60.992 187.776zM502.08 734.464a32 32 0 1 0 19.84-60.928 32 32 0 0 0-19.84 60.928z"
              ></path>
            </svg>
            <span>仪表盘</span>
          </el-menu-item>
          <el-sub-menu index="2">
            <template #title>
              <svg
                style="width20px;height:20px;margin-right:10px;"
                viewBox="0 0 1024 1024"
                xmlns="http://www.w3.org/2000/svg"
                data-v-ba633cb8=""
              >
                <path
                  fill="currentColor"
                  d="M160 448a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32H160zm448 0a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32H608zM160 896a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32H160zm448 0a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32H608z"
                ></path>
              </svg>
              <span>常用设置</span>
            </template>
            <el-menu-item @click="gotoPage('/teacherManagement')" index="2-1">教师管理</el-menu-item>
            <el-menu-item @click="gotoPage('/studentManagement')" index="2-2">学生管理</el-menu-item>
            <el-menu-item @click="gotoPage('/noticeManagement')" index="2-3">公告管理</el-menu-item>
            <el-menu-item @click="gotoPage('/sysManagement')" index="2-4">系统配置</el-menu-item>
            <el-menu-item @click="gotoPage('/qusManagement')" index="2-5">判题管理</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <svg
                style="width20px;height:20px;margin-right:10px;"
                viewBox="0 0 1024 1024"
                xmlns="http://www.w3.org/2000/svg"
                data-v-ba633cb8=""
              >
                <path
                  fill="currentColor"
                  d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z"
                ></path>
                <path
                  fill="currentColor"
                  d="M512 96a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V128a32 32 0 0 1 32-32zm0 576a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V704a32 32 0 0 1 32-32zM96 512a32 32 0 0 1 32-32h192a32 32 0 0 1 0 64H128a32 32 0 0 1-32-32zm576 0a32 32 0 0 1 32-32h192a32 32 0 1 1 0 64H704a32 32 0 0 1-32-32z"
                ></path>
              </svg>
              <span>问题</span>
            </template>
            <el-menu-item @click="gotoPage('/qusList')" index="3-1">问题列表</el-menu-item>
            <el-menu-item @click="gotoPage('/addQus')" index="3-2">增加题目</el-menu-item>
            <el-menu-item @click="gotoPage('/importQus')" index="3-3">导入导出题目</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
              <svg
                style="width20px;height:20px;margin-right:10px;"
                viewBox="0 0 1024 1024"
                xmlns="http://www.w3.org/2000/svg"
                data-v-ba633cb8=""
              >
                <path
                  fill="currentColor"
                  d="M480 896V702.08A256.256 256.256 0 0 1 264.064 512h-32.64a96 96 0 0 1-91.968-68.416L93.632 290.88a76.8 76.8 0 0 1 73.6-98.88H256V96a32 32 0 0 1 32-32h448a32 32 0 0 1 32 32v96h88.768a76.8 76.8 0 0 1 73.6 98.88L884.48 443.52A96 96 0 0 1 792.576 512h-32.64A256.256 256.256 0 0 1 544 702.08V896h128a32 32 0 1 1 0 64H352a32 32 0 1 1 0-64h128zm224-448V128H320v320a192 192 0 1 0 384 0zm64 0h24.576a32 32 0 0 0 30.656-22.784l45.824-152.768A12.8 12.8 0 0 0 856.768 256H768v192zm-512 0V256h-88.768a12.8 12.8 0 0 0-12.288 16.448l45.824 152.768A32 32 0 0 0 231.424 448H256z"
                ></path>
              </svg>
              <span>比赛和练习</span>
            </template>
            <el-menu-item @click="gotoPage('/matchList')" index="4-1">比赛列表</el-menu-item>
            <el-menu-item @click="gotoPage('/addMatch')" index="4-2">创建比赛</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="5">
            <template #title>
              <svg
                style="width20px;height:20px;margin-right:10px;"
                viewBox="0 0 1024 1024"
                xmlns="http://www.w3.org/2000/svg"
                data-v-ba633cb8=""
              >
                <path
                  fill="currentColor"
                  d="M192 736h640V128H256a64 64 0 0 0-64 64v544zm64-672h608a32 32 0 0 1 32 32v672a32 32 0 0 1-32 32H160l-32 57.536V192A128 128 0 0 1 256 64z"
                ></path>
                <path
                  fill="currentColor"
                  d="M240 800a48 48 0 1 0 0 96h592v-96H240zm0-64h656v160a64 64 0 0 1-64 64H240a112 112 0 0 1 0-224zm144-608v250.88l96-76.8 96 76.8V128H384zm-64-64h320v381.44a32 32 0 0 1-51.968 24.96L480 384l-108.032 86.4A32 32 0 0 1 320 445.44V64z"
                ></path>
              </svg>
              <span>课程</span>
            </template>
            <el-menu-item @click="gotoPage('/courseList')" index="5-1">课程列表</el-menu-item>
            <el-menu-item @click="gotoPage('/addCourse')" index="5-2">创建课程</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header class="header">
          <svg
            style="width20px;height:20px;margin-right:10px;"
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            data-v-ba633cb8=""
          >
            <path
              fill="currentColor"
              d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704z"
            ></path>
          </svg>
          <svg
            style="width20px;height:20px;margin-right:10px;"
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            data-v-ba633cb8=""
          >
            <path
              fill="currentColor"
              d="m679.872 348.8-301.76 188.608a127.808 127.808 0 0 1 5.12 52.16l279.936 104.96a128 128 0 1 1-22.464 59.904l-279.872-104.96a128 128 0 1 1-16.64-166.272l301.696-188.608a128 128 0 1 1 33.92 54.272z"
            ></path>
          </svg>
          <el-dropdown>
            <span class="el-dropdown-link" style="font-size: 19px;">
              username
              <svg style="width:15px;height:15px;margin-right:10px;" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ba633cb8=""><path fill="currentColor" d="M104.704 338.752a64 64 0 0 1 90.496 0l316.8 316.8 316.8-316.8a64 64 0 0 1 90.496 90.496L557.248 791.296a64 64 0 0 1-90.496 0L104.704 429.248a64 64 0 0 1 0-90.496z"></path></svg>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>logout</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>
        <el-main class="main">
          <router-view></router-view>
        </el-main>
        <el-footer class="footer">
          Build Version: 20220415bd
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'home',
  components: {},
  methods: {
    gotoPage (path) {
      console.log(path)
      this.$router.push(path)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
}
.img-container {
  display: flex;
  justify-content: center;
}
.header{
  display: flex;
  justify-content: right;
  align-items: center;
  background-color: #F9FAFC;
}
.main{
  background: #EDECEC;
}
.footer{
  background: #EDECEC;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
